$rows:20;
$columns:20;
$triggerSide:20;

$color:#2ecc71;

@use 'sass:math';

.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    inset: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 2px;
    background: #2e3e50;
    color: #fff;

}


.trigger{
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    float: left;
    width: ($triggerSide) + px;
    height: ($triggerSide) + px;
    // border: 1px solid #2ecc71;
    background: none;
    opacity: 0;
}

.mouseFollow{
    position: absolute;
    width: 20px;
    height: 20px;
    top: -10px;
    left: -10px;
    z-index: 2;
    border-radius: 50%;
    transform: translate(200px, 200px);
    background: $color;
    transition: all .3s ease-in-out;
    pointer-events: none;

    &::after{
        box-sizing: border-box;
        content: '';
        position: absolute;
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid $color;
        top: -5px;
        left: -5px;
        animation: pulsate 1.5s ease-out infinite;
    }
}


@for $row from 1 through $rows{
    @for $col from 1 through $columns{

        $top:( ($row * $triggerSide) - (math.div($triggerSide, 2)) ) + px;
        $left:( ($col * $triggerSide) - (math.div($triggerSide, 2)) ) + px;

        $i: ($row - 1) * $columns + $col;

        .trigger-#{$i}:hover ~ .mouseFollow{
            transform: translate($left, $top);
        }

    }
}

@keyframes pulsate {
    from{
        transform: scale(.5);
        opacity: 1;
    }
    to{
        transform: scale(2);
        opacity: 0;
    }
}
